<template>
  <div class="search-page">
    <!-- 1)搜索路线站点、设置起始点使用搜索框，涉及到下拉框自由联想 -->
    <div class="search" v-if="searchData.isPullDown">

      <div style="width: 100%; float: left; display: flex;">
          <input style="width: 87%; outline:none;" type="text" id="search" class="form-control" v-model="searchParam" v-bind:placeholder="searchData.placeholder">
          <div style=" width: 13%; font-size: 0.37rem; color: #fe952c; align-self: center; text-align: right;" v-on:click="cancel">
            取消
          </div>
      </div>

      <div class="drop-down-box" v-show="isShow">
        <div class="list" v-for="item in searchResult" v-on:click="jumpPage(item)">
          <!-- a)搜索路线站点 -->
          <div v-if="searchData.page === 1" class="search-list-line-site">
              <img class="line-site-icon" v-if="item.type === 1" src="../../assets/image/bus-gray-icon.png"/>
              <img class="line-site-icon" v-if="item.type === 2" src="../../assets/image/bus-site-gray-icon.png"/>
              <span >{{item.name}}</span>
              <span class="line-direction">{{item.direction}}</span>
          </div>

          <!-- b)设置起始点 -->
          <div v-else>
            <div v-if="item.type == 0" class="search-list-point">
              <span>{{item.address}}</span>
              <span style="width: 100%;height: 0.16rem"></span>
              <span class="point-descrip-text">{{item.district}}</span>
            </div>
            <div v-else class="search-list-point-address">
              <span>{{item.address}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 2)首页展示搜索框 -->
    <div class="search-home" v-else>
      <div class="form-control" v-on:click="searchLineSite()" >查询线路、公交站点</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      searchData: {
        type: Object
      }
    },
    data () {
      return {
        searchParam: '',
        searchResult: {},
        isShow: false
      };
    },
    /*
    监控检索关键字
    */
    watch: {
      searchParam (curVal, oldVal) {
        curVal = this.$utils.trim(curVal);
        oldVal = this.$utils.trim(oldVal);
        if (curVal === oldVal) {
          return;
        }
        if (curVal.length > 0) {
          this.isShow = true;
          this.$emit('searchEvent', 0);
          this.searchMethod(curVal);
        } else {
          this.isShow = false;
          this.$emit('searchEvent', 1);
          this.searchResult = {};
        }
      }
    },
    created () {
      if (this.$storage.setStorage('intervalID')) {
        clearInterval(this.$storage.setStorage('intervalID'));
      }
    },
    mounted () {
      if (document.getElementById('search')) {
        document.getElementById('search').focus();
      }
    },
    methods: {
      /*
      搜索，区分设置起始点、搜索线路站点，不同情况跳转路由不同
       */
      searchMethod: function (curVal) {
        if (curVal.length > 15) {
          curVal = curVal.substr(0, 15);
        }
        let path;
        let param = {};
        param.keywords = curVal;
        if (this.searchData.page === this.$global.SEARCH_START_ADDRESS || this.searchData.page === this.$global.SEARCH_END_ADDRESS) { // 起点、终点搜索
          path = this.$global.API_SEARCH_ADDRESS;
          param.city = this.$storage.getStorage('currentCity');
        } else if (this.searchData.page === this.$global.SEARCH_ROUTE_SITE) { // 线路、站点搜索
          if (!this.$storage.getStorage('areacode')) {
            this.$emit('searchEvent', 2);
            return;
          }
          path = this.$global.API_SEARCH_ROUTE_SITE;
        }
        var vueObj = this;
        this.$baseService.getData(path, param, function (data) {
          vueObj.searchResult = {};
          vueObj.searchResult = Object.assign({}, vueObj.searchResult, data);
          if (data.length === 0) {
            vueObj.$emit('searchEvent', 2);
          }
        });
      },

      /*
      页面跳转方法，需区分跳转
       */
      jumpPage: function (item) {
        let routerPath;
        let param = {};
        param.flag = 'search';
        if (this.searchData.page === this.$global.SEARCH_START_ADDRESS) {
          routerPath = '/';
          this.$storage.setStorage('startAddress', item);
        } else if (this.searchData.page === this.$global.SEARCH_END_ADDRESS) {
          routerPath = '/';
          this.$storage.setStorage('endAddress', item);
        } else if (this.searchData.page === this.$global.SEARCH_ROUTE_SITE) {
          if (item.type === 1) { // 线路
            param.routeName = item.name;
            param.direction = item.direction;
            param.updown = item.updown;
            this.$storage.setStorage('lineDetails', param);
            routerPath = '/lineDetails';
          } else if (item.type === 2) { // 站点
            routerPath = '/siteDetails';
            param.name = item.name;
            this.$storage.setStorage('searchSiteDetailParam', param);
          }
        }
        this.$router.push({path: routerPath});
      },
      searchLineSite: function () {
        this.$router.push({path: '/searchLineSite'});
      },
      cancel: function () {
        this.$router.push({path: '/'});
      }
    }
  };
</script>

<style scoped>

  .search-page {
    margin-top: 0.26rem;
  }

  .search-home {
    margin:0px 0.4rem 0px 0.4rem;
    box-shadow: 0px 0px 1px #EEEEEE;
  }

  .search-home .form-control {
    background: white url(../../assets/image/search-icon.png) no-repeat 0.4rem;
    background-size: 0.45rem;
    padding-left: 1.12rem;
    border: none;
    font-size: 0.345rem;
    padding-top: 0.21rem;
    line-height: normal;
    outline:none;
    box-shadow: none;
    color: #999999;
  }

  .search {
    margin:0px 0.4rem 0px 0.4rem;
    box-shadow: 0px 0px 1px #EEEEEE;
  }

  .search  .form-control {
    background: white url(../../assets/image/search-icon.png) no-repeat 0.4rem;
    background-size: 0.45rem;
    padding-left: 1.12rem;
    border: none;
    font-size: 0.345rem;
    padding-top: 0.21rem;
    line-height: normal;
    outline: none;
    box-shadow: none;
  }

  input{
    /*-webkit-tap-highlight-color: rgba(0,0,0,0);*/
    /*-webkit-user-select: none;*/
    /*-moz-user-select: none;*/
    /*-webkit-appearance:none;*/
    outline: none;
    border: none;
    -webkit-tap-highlight-color:transparent;
  }

  input:focus { outline: none; }

  .drop-down-box {
    background-color: white;
    border-top: none;
    position:absolute;
    left:0.4rem;
    right: 0.4rem;
    top:1.28rem;
    z-index:999;
  }

  .drop-down-box .list {
    /*padding:0rem 0px 0.13rem 0px;*/
    border-top: 1px solid #f7f7f7;
    margin:0px 0rem 0px 0.4rem;
  }

  /*.drop-down-box .list span{*/
    /*!*height: 15px;*!*/
    /*!*margin-left: 0.26rem;*!*/
    /*font-size: 0.34rem;*/
  /*}*/

  .line-site-icon{
    width: 0.4rem;
    height: 0.4rem;
    align-self: center;
  }

  .line-direction{
    font-size: 0.34rem;
    color: #666666;
  }


  .search-list-line-site {
    display: flex;
    height: 0.933rem;
  }

  .search-list-line-site span{
    align-self: center;
    font-size: 0.34rem;
    margin-left: 0.26rem;
  }

  .search-list-point{
    height: 1.6rem;
    font-size: 0.34rem;
    padding-top: 0.32rem;
  }

  .search-list-point span{
    /*line-height: 1.6rem;*/
    display:block;
  }

  .search-list-point-address {
    height: 1.04rem;
    font-size: 0.34rem;
  }
  .search-list-point-address span{
    line-height: 1.04rem;
  }

  .point-descrip-text{
    font-size: 0.34rem;
    color: #666666;
    /*bottom: 0.13rem;*/
  }

</style>
